<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-12-18 15:55:20
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-10-09 15:02:14
 * @FilePath: PieChart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <!-- 柱状图组合 -->
    <div class="MultiLineChartBox">
        <!-- tab切换 -->
        <div class="tabBox">
            <el-row style="width: 100%;" justify="space-between">
                <el-col :span="Number(activeName) === 1 ? 24 : 24">
                    <el-radio-group size="small" v-model="activeName" @change="selectActive">
                        <el-radio-button label="1">运营商路线统计</el-radio-button>
                        <el-radio-button label="2">学校设备总量</el-radio-button>
                    </el-radio-group>
                </el-col>
                <!-- <el-col v-if="Number(activeName) === 1" :span="8" style="text-align: right;">
                    <el-radio-group size="small" v-model="currentIndex" @change="selectActive2">
                        <el-radio-button label="1">今天</el-radio-button>
                        <el-radio-button label="2">月</el-radio-button>
                    </el-radio-group>
                </el-col> -->
            </el-row>
        </div>
        <!-- 运营商路线统计 -->
        <div class="contentOne" v-show="activeName == '1'">
            <div class="canvasBox">
                <div id="PieChartOne">
                </div>
            </div>
            <div class="list list2">
                <div class="items2" v-for="(item, index) in listData" :key="index">
                    <div class="leftItem">
                        <div class="dot" :style="'border-color:' + item.color + ';'"></div>
                        <div class="name">{{ item.name }}</div>
                    </div>
                    <div class="rightItem">
                        {{ item.percentage }}%
                    </div>
                </div>
            </div>
        </div>
        <!-- 学校设备总量 -->
        <div class="contentTwo" v-show="activeName == '2'">
            <div class="canvasBox">
                <div id="PieChartTwo">
                </div>
            </div>
            <div class="list" v-if="deviceList.length > 0">
                <div class="itemFlex">
                    <div class="title">学校设备总量</div>
                </div>
                <div class="tip">
                    <div><span>{{ deviceOfflineCount }}</span><span>离线</span></div>
                    <div><span>{{ deviceOnlineCount }}</span><span>在线</span></div>
                    <div><span>{{ deviceOtherCount }}</span><span>其他</span></div>
                </div>
                <div class="itemFlex">
                    <div class="title">{{ deviceList[selectIndex].name }}</div>
                </div>
                <div class="itemFlex">
                    <div class="items">
                        <div class="rightItem">
                            {{ deviceList[selectIndex].value }}
                        </div>
                        <div class="leftItem">
                            <div class="name">总设备</div>
                        </div>
                    </div>
                    <div class="items">
                        <div class="rightItem">
                            {{ deviceList[selectIndex].onlineCount }}
                        </div>
                        <div class="leftItem">
                            <div class="name">在线</div>
                        </div>
                    </div>
                    <div class="items">
                        <div class="rightItem" style="color: #FF3232;">
                            {{ deviceList[selectIndex].offlineCount }}
                        </div>
                        <div class="leftItem">
                            <div class="name">离线</div>
                        </div>
                    </div>
                    <div class="items">
                        <div class="rightItem">
                            {{ deviceList[selectIndex].notStatCount }}
                        </div>
                        <div class="leftItem">
                            <div class="name">其他</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'PieChart',
    props: {
        // showLineNum: {
        //     type: Number,
        //     default: 0
        // },
    },
    data() {
        return {
            activeName: '1',
            currentIndex: '1',
            pieChartOne: null,
            pieChartTwo: null,
            listData: [],
            chartData: [],
            // 学校设备总数
            deviceList: [],
            // 点击选中的数据
            selectIndex: 0,
            // 设备总数
            deviceTotal: 0,
            deviceOnlineCount: 0,
            deviceOfflineCount: 0,
            deviceOtherCount: 0,
        }
    },
    mounted() {
        this.getChartOneData()
        this.getDeviceList()
        window.addEventListener('resize', () => {
            setTimeout(async () => {
                await this.pieChartOne.resize()
                await this.pieChartTwo.resize()
            }, 100)
        })
    },
    methods: {
        selectActive(val) {
            if (Number(this.activeName) === 1) {
                this.getChartOneData()
            } else {
                this.getDeviceList()
            }
            this.pieChartOne.resize()
            this.pieChartTwo.resize()
        },
        selectActive2() {
            this.getChartOneData()
        },
        // 当日运营商线路线路通话
        async getChartOneData() {
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/yysTrunkLine')
            let arr = []
            res.forEach((item) => {
                arr.push({
                    value: item.trunkLineCount,
                    name: item.yysName,
                })
            })
            this.chartData = arr
            await this.getChartOne()
        },
        total(arry) {
            var i = 0
            arry.forEach((item) => {
                i = i + Number(item.value)
            })
            return i
        },
        getChartOne() {
            this.pieChartOne = this.$echarts.init(document.getElementById('PieChartOne'))
            let color = ['#1FA4F8', '#FFE401', '#F95B00', '#18C78B', '#AE1FB8', '#F79F83']
            const num = this.total(JSON.parse(JSON.stringify(this.chartData)))
            this.listData = []
            this.chartData.forEach((item, index) => {
                this.listData.push({
                    value: item.value,
                    name: item.name,
                    color: color[index],
                    percentage: num > 0 ? (Number(item.value) * 100 / num).toFixed(2) : 0.00
                })
            })
            var option = {
                tooltip: {
                    backgroundColor: "#fff",
                    borderColor: 'transparent',
                    extraCssText: "box-shadow: 0px 9px 28px 1px rgba(0,0,0,0.05);",
                    // position: 'inside'
                    confine: true,
                },
                color: color,
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['46%', '60%'],
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        clockWise: false, // 默认逆时针
                        normal: {
                            borderWidth: 2,
                            borderColor: '#fff'
                        },
                        itemStyle: {
                            borderColor: '#0A1739',
                            borderWidth: 1
                        },
                        label: {
                            show: false,
                            position: 'center',
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: '{total|' + this.chartData.length + '}' + '\n\r' + '{active|运营商线路}',
                                rich: {
                                    total: {
                                        fontSize: this.$util.nowSizeWidth(18),
                                        fontFamily: "Arial-Bold, Arial",
                                        color: '#ffffff',
                                        lineHeight: this.$util.nowSizeWidth(22),
                                        fontWeight: 'bold'
                                    },
                                    active: {
                                        fontFamily: "Microsoft YaHei-Bold, Microsoft YaHei",
                                        fontSize: this.$util.nowSizeWidth(14),
                                        color: '#ffffff',
                                        lineHeight: this.$util.nowSizeWidth(22),
                                        fontWeight: 'bold'
                                    },
                                }
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: this.chartData
                    }
                ]
            }
            this.pieChartOne.setOption(option, true)
        },
        // 获取学校设备总数
        async getDeviceList() {
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/schoolPhoneStat')
            let arr = []
            this.deviceTotal = 0
            this.deviceOnlineCount = 0
            this.deviceOfflineCount = 0
            this.deviceOtherCount = 0
            res.forEach((item) => {
                arr.push({
                    value: item.totalCount,
                    name: item.schoolName,
                    notStatCount: item.notStatCount,
                    offlineCount: Number(item.offlineCount),
                    onlineCount: item.onlineCount,
                })
                this.deviceTotal = this.deviceTotal + Number(item.totalCount)
                this.deviceOnlineCount = this.deviceOnlineCount + Number(item.onlineCount)
                this.deviceOfflineCount = this.deviceOfflineCount + Number(item.offlineCount)
                this.deviceOtherCount = this.deviceOtherCount + Number(item.notStatCount)
            })

            this.deviceList = arr
            this.selectItem = this.deviceList[0]
            await this.getChartTwo()
        },
        getChartTwo() {
            let that = this;
            that.pieChartTwo = that.$echarts.init(document.getElementById('PieChartTwo'))
            var option = {
                tooltip: {
                    backgroundColor: "#fff",
                    borderColor: 'transparent',
                    extraCssText: "box-shadow: 0px 9px 28px 1px rgba(0,0,0,0.05);",
                    // position: 'inside'
                    confine: true,
                },
                series: [
                    {
                        name: '',
                        confine: true,
                        type: 'pie',
                        radius: ['46%', '60%'],
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        clockWise: false, // 默认逆时针
                        normal: {
                            borderWidth: 2,
                            borderColor: '#fff'
                        },
                        itemStyle: {
                            borderColor: '#0A1739',
                            borderWidth: 1
                        },
                        label: {
                            show: false,
                            position: 'center',
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: '{total|' + that.deviceTotal + '}' + '\n\r' + '{active|学校设备总量}',
                                rich: {
                                    total: {
                                        fontSize: that.$util.nowSizeWidth(18),
                                        fontFamily: "Arial-Bold, Arial",
                                        color: '#ffffff',
                                        lineHeight: that.$util.nowSizeWidth(22),
                                        fontWeight: 'bold'
                                    },
                                    active: {
                                        fontFamily: "Microsoft YaHei-Bold, Microsoft YaHei",
                                        fontSize: that.$util.nowSizeWidth(14),
                                        color: '#ffffff',
                                        lineHeight: that.$util.nowSizeWidth(22),
                                        fontWeight: 'bold'
                                    },
                                }
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: that.deviceList
                    }
                ]
            }
            that.pieChartTwo.setOption(option, true)
            that.pieChartTwo.on('mousemove', function (params) {
                that.selectIndex = Number(params.dataIndex)
            })
        },
    }
}
</script>
<style lang="less" scoped>
.MultiLineChartBox {
    width: 100%;
    height: 240px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;

    .tabBox {
        position: absolute;
        top: 20px;
        left: 0px;
        z-index: 999;
        width: 100%;
    }

    .contentOne {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;

        .canvasBox {
            overflow: hidden;
            flex: 1;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;

            #PieChartOne {
                margin: auto;
                width: 100%;
                height: 100%;
            }
        }
    }

    .contentTwo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
        // margin-top: -20px;

        .canvasBox {
            overflow: hidden;
            flex: 1;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: relative;

            #PieChartTwo {
                margin: auto;
                width: 100%;
                height: 100%;
            }
        }

    }

    .list {
        font-size: 12px;
        margin-right: 46px;
        width: 205px;
        font-size: 13px;
        margin-top: -10px;

        .tip {
            border-bottom: 1px dashed #C9CDD6;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 8px;


            div {
                flex: 1;
                text-align: center;

                span {
                    display: block;
                    padding: 4px 0;
                }

                span:first-of-type {
                    font-weight: bold;
                }
            }
        }

        .itemFlex {
            width: 100%;
            display: flex;
            align-items: center;

            .title {
                padding: 14px 0 8px 0;
                width: 100%;
                text-align: center;
            }

            .items {
                flex: 1;
                text-align: center;

                .leftItem {
                    padding: 3px 0;
                }

                .rightItem {
                    padding: 3px 0;
                    font-weight: bold;
                }
            }
        }

        .itemFlex:nth-of-type(1) {
            .title {
                padding-top: 0px;
            }
        }

        .items2 {
            display: flex;
            align-items: center;
            padding-bottom: 5px;
            padding-top: 5px;

            .leftItem {
                flex: 1;
                display: flex;
                align-items: center;
                overflow: hidden;

                .dot {
                    width: 12px;
                    height: 12px;
                    border: 3px solid #22A4F8;
                    border-radius: 50%;
                    margin-right: 10px;
                }

                .name {
                    flex: 1;
                    overflow: hidden;
                }
            }

            .rightItem {
                font-weight: bold;
            }
        }
    }

    .list2 {
        width: 185px;
        margin-left: 20px;
    }
}
</style>